<template>
  <div class="login" >
    <el-dialog v-model="Login.dialogFormVisible" title="用户登录" width="900" height="500" @close="close(formRef)" >
      <div class="content">
        <el-row>
          <!--      左侧-->
          <el-col :span="12" class="left">
            <!--         表单-->
            <!--         填写手机号登录-->
            <el-form v-show="isshow===0"
                     :model="loginParams"
                     :rules="rules"
                     ref="formRef"
                     >
              <!--          手机号-->
              <el-form-item prop="phone">
                <el-input placeholder="请输入手机号" :prefix-icon="UserFilled" v-model="loginParams.phone"></el-input>
              </el-form-item>


              <!--          验证码-->
              <el-form-item prop="code">
                <el-input placeholder="请输入验证码" :prefix-icon="Lock" v-model="loginParams.code"></el-input>
              </el-form-item>
              <div class="code_btn">
                <el-button :disabled="!isPhone||countFlag" @click="loginCode">
                  <span v-if="countFlag">获取验证码{{ countDown }}s</span>
                  <span v-else>获取验证码</span>
                </el-button>
              </div>
              <div class="login_btn">
                <el-button color="#389AFF" @click="loginReq" :disabled="!logCodeFlag&&!logPhoneFlag">用户登录</el-button>
              </div>
              <div class="weixin">
                <span @click="change_show(1)">微信扫码登录</span>
                <svg @click="change_show(1)" t="1709882605318" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="4287" width="32" height="32">
                  <path
                      d="M1024 619.52c0-143.36-138.24-256-307.2-256s-307.2 112.64-307.2 256 138.24 256 307.2 256c30.72 0 61.44-5.12 92.16-10.24l97.28 51.2-25.6-76.8c87.04-51.2 143.36-128 143.36-220.16z m-414.72-40.96c-30.72 0-51.2-20.48-51.2-51.2s20.48-51.2 51.2-51.2 51.2 20.48 51.2 51.2c0 25.6-25.6 51.2-51.2 51.2z m209.92 0c-30.72 0-51.2-20.48-51.2-51.2s20.48-51.2 51.2-51.2 51.2 20.48 51.2 51.2c0 25.6-25.6 51.2-51.2 51.2z"
                      fill="#4CBF00" p-id="4288"></path>
                  <path
                      d="M358.4 609.28c0-158.72 153.6-286.72 348.16-286.72h15.36c-40.96-133.12-179.2-235.52-353.28-235.52-204.8 0-368.64 138.24-368.64 307.2 0 107.52 66.56 204.8 168.96 256l-30.72 92.16L256 686.08c35.84 10.24 71.68 15.36 112.64 15.36h10.24c-15.36-30.72-20.48-61.44-20.48-92.16z m138.24-414.72c35.84 0 66.56 30.72 66.56 66.56s-30.72 66.56-66.56 66.56C460.8 322.56 430.08 291.84 430.08 256S460.8 194.56 496.64 194.56zM245.76 322.56c-35.84 0-61.44-30.72-61.44-66.56s30.72-66.56 66.56-66.56 61.44 30.72 61.44 66.56-30.72 66.56-66.56 66.56z"
                      fill="#4CBF00" p-id="4289"></path>
                </svg>
              </div>
            </el-form>

            <!--         扫码登录-->
            <div v-show="isshow===1">
              <span @click="change_show(0)">二维码</span>
            </div>

          </el-col>
          <!--      右侧-->
          <el-col :span='12' class="right">
            <div class="code_img">
              <div>
                <img src="@/assets/images/code_login_wechat.png" alt="">
                <span>微信扫一扫关注</span>
                <span>"快速预约挂号"</span>
              </div>
              <div>
                <img src="@/assets/images/code_app.png" alt="">
                <span>扫一扫下载</span>
                <span>"预约挂号"APP</span>
              </div>
            </div>
            <div class="syt_text">
              <span>尚医通官方指定平台</span>
              <span>快速挂号&nbsp;&nbsp;&nbsp;&nbsp;安全放心</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
//引入登录仓库
import {useLogin} from "@/stores/modules/user.ts";
import {ref, reactive, computed, watch} from "vue";
import {UserFilled, Lock} from '@element-plus/icons-vue'
import {reqLogin} from "@/api/user";
import {ElLoading, ElMessage} from "element-plus";
// 引入消息提示
import {ElLoadingService} from "element-plus";
// 引入element类型限制
import type { FormRules,FormInstance  } from 'element-plus'
const formRef = ref<FormInstance>()
let logPhoneFlag=ref<boolean>(false)
let logCodeFlag=ref<boolean>(false)

let loginParams = reactive({
  phone: '',
  code: ''
})

const validatePhone=(rule: any, value: any, callback: any)=>{
   const phoneReg = /^1[3-9][0-9]{9}$/;
   if(phoneReg.test(value)){
     logPhoneFlag=true
     callback()

   }
   else {
     callback(new Error('手机号格式不正确'))
   }
}
const validateCode=(rule: any, value: any, callback: any)=>{
  const codeReg = /^\d{6}$/;
  if(codeReg.test(value)){
    logCodeFlag=true
    callback()

  }
  else {
    callback(new Error('验证码格式不正确'))

  }
}
// 表单验证规则
const rules = reactive<FormRules<typeof loginParams>>({
  phone: [{ validator: validatePhone, trigger: 'change' }],
  code: [{ validator: validateCode, trigger: 'change' }],
})

let isPhone = computed(() => {
  const phoneReg = /^1[3-9][0-9]{9}$/
  return phoneReg.test(loginParams.phone)
})

// 获取验证码倒计时
let countDown = ref<number>(60)
let countFlag = ref<boolean>(false)

const Login = useLogin()

// 显示二维码还是手机输入的标志
let isshow = ref<number>(0)
const change_show = (flag: number) => {
  isshow.value = flag

}

// 获取验证码
const loginCode = async () => {
  await Login.getCode(loginParams.phone)
  loginParams.code = Login.code
  countFlag.value = true
  //  获取验证码倒计时
  window.timer = setInterval(() => {
    countDown.value--
  }, 1000)
}

// 监视获取验证码倒计时
watch(countDown, (newValue, oldValue) => {
  if (oldValue === 0) {
    if(window.timer){
      clearInterval(timer)
    }
    countDown.value = 60
    countFlag.value = false
  }
})

// 用户登录
const loginReq=async ()=>{
 await Login.postLogin({
    phone:loginParams.phone,
    code:loginParams.code
  }).then(()=>{
    const loading = ElLoading.service({
      lock: true,
      text: '登录中...',
      background: 'rgba(0, 0, 0, 0.2)',
    })
    setTimeout(()=>{
      loading.close()
      Login.dialogFormVisible=false
      ElMessage({
        type:'success',
        message:'登录成功！'
      })
    },1000)

  },()=>{

  })

}
// 关闭对话框
const close=(formEl:FormInstance|undefined)=>{
 if(window.timer){
   clearInterval(timer)
 }
  countDown.value = 60
  countFlag.value = false
  // 重置输入框
  Object.assign(loginParams,{phone:'',code:''})
  // 重置输入框规则
  formEl.resetFields()
}


</script>

<style scoped lang="scss">
:deep(.el-dialog__header) {
  border-bottom: 1px solid gray;
}

.login {
  .content {
    .left {
      margin-top: 20px;
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      border: 1px solid #DBDADC;
      width: 100%;
      height: 400px;

      el-form{
        width: 100%;
      }
      :deep(.el-form-item__content) {
        width: 350px;
        height: 50px;
        margin-bottom: 20px;
      }
      :deep(.el-input__wrapper){
        width: 100%;
        height: 50px;
      }

      .code_btn {
        width: 100%;

        :deep(.el-button) {
          width: 30%;
          height: 40px;
        }
      }

      .login_btn {
        margin-top: 20px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        :deep(.el-button) {
          width: 90%;
          height: 40px;
          color: white;
          font-size: 16px;
        }
      }

      .weixin {
        width: 100%;
        height: 50px;
        margin-top: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;

        span {
          width: 100%;
          height: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
        }

        svg {
          cursor: pointer;

        }
      }

    }
  }

  .right {
    width: 100%;
    height: 400px;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;

    .code_img {
      margin-top: 20px;
      width: 100%;
      height: 240px;
      display: flex;

      div {
        width: 50%;
        height: 90%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;

        img {
          width: 150px;
          height: 150px;
        }

        span {
          justify-content: center;
          align-items: center;
          display: flex;
          width: 100%;
          height: 30px;
          font-size: 16px;
          color: #7f7f7f;
        }
      }
    }

    .syt_text {
      width: 100%;
      height: 40%;

      span {
        width: 100%;
        height: 35%;
        font-weight: bolder;
        font-size: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>